<template>
  <div class="mod-config">
    <div v-if="select">
      <el-button
        size="medium" type="default"
        style="margin-bottom: 15px"
        @click="outPutShow(false, undefined)">导出EXCEL</el-button>
      <el-button
        size="medium" type="success"
        style="margin-bottom: 15px" @click="outPutShow(true, undefined)">全部导出</el-button>
    </div>
    <div v-for="(table,index) in table_data" :key="index">
      <div style="text-align: center;color: #14988b;font-size: 18px;margin:8px 0 8px 0">{{table.tableName}}</div>
      <el-table
        border
        style="margin-top: 1px;width: 100%"
        v-loading="dataListLoading"
        :data="table.tableCell"
      >
        <el-table-column v-for="(index_, item) in table.tableCell[0]" :key="item"
                         :prop= item
                         height="80"
                         :resizable=true
                         :label= item>
        </el-table-column>
      </el-table>
      <el-pagination
        :ref="'table'+table.tableName"
        v-if="select"
        @size-change="sizeChangeHandle(table.tableName,$event)"
        @current-change="currentChangeHandle(table.tableName,$event)"
        :current-page="table.currentPage"
        :page-size="table.pageSize"
        :total="table.totalCount"
        :page-count="table.totalPage"
        layout="total, prev, pager, next, jumper">
      </el-pagination>
    </div>
    <el-form :v-model="dataForm" @keyup.native.enter = "submitSearchResult">
      <el-form-item>
        <div style="border-top: #6f7180;float: unset;margin: 2% 0 -3% 0%"><i class="el-progress__text" style="font-size: 17px">常用查询</i></div>
      </el-form-item>

      <el-form-item  v-for="(key, index1) in now_conditions" :key="index1" style="margin-left: 5%;margin-bottom: 0">
        <i  class="el-col-lg-offset-0" style="width: 21%" >{{key+" : "}}</i>
        <el-input class="input_style" v-model="dataForm[key]" placeholder="请输入内容"></el-input>
      </el-form-item>

      <el-form-item class="input_style_"  style="width:100%;margin:2% 0 0 0 ;background-color: #f2f6fc" >
          <el-collapse-transition style="border: 3px">
            <div v-if="more_visible" >
              <div style="border-top: #6f7180;float: unset;margin: 2% 0 8px 2%"><i class="el-progress__text" style="font-size: medium">更多查询条件</i>
                <el-tooltip class="item" effect="dark" content="点击自定义查询" placement="right-end">
                  <el-button style="margin-left:2%;background-color: #409EFF;color: aliceblue"  icon="el-icon-edit" size="mini" circle @click="customConditionHandler"></el-button>
                </el-tooltip></div>

              <div class="input_style_" style="margin-left: 7.5%" v-for="(key, index1) in other_conditions" :key="index1">
                <i  class="el-col-lg-offset-0" >{{key+" : "}}</i>
                <el-input class="input_style" v-model="dataForm[key]" placeholder="请输入内容"></el-input>
              </div>
              <div class="input_style_" style="width: 100%">
              </div>
            </div>
          </el-collapse-transition>
      </el-form-item>

      <el-form-item class="input_style_" style="width: 100%">
        <el-button class="button_style" icon="el-icon-submit" type="success" @click="submitSearchResult">提交查询</el-button>
        <el-button class="button_style" @click="more_visible =! more_visible">更多查询</el-button>
      </el-form-item>

    </el-form>
    <more-search v-model="customCondition" @refresh = "refreshCondition" ref="more_search"></more-search>
    <out-put v-model="showOutPut" @refresh = "outPutShow(true, $event)" ref="outPut"></out-put>
  </div>
</template>

<script>
import moreSearch from './more-search'
import outPut from './output'
import XLSX from 'xlsx'
export default {
  data () {
    return {
      showOutPut: false,
      select: false,
      table_data: [],
      more_visible: false,
      customCondition: false,
      now_conditions: [],
      other_conditions: [],
      keys: '',
      vals: '',
      allConditions:[],
      dataForm: {},
      dataListLoading: false,
      dataListSelections: []
    }
  },
  components: {
    moreSearch,
    outPut
  },
  created () {
    this.getConditionS()
  },
  methods: {
    // 获取查询条件们
    getConditionS () {
      console.log('asd')
      this.$http({
        url: this.$http.adornUrl('/get/hms_common_condition/fields'),
        method: 'get'
      }).then(({data}) => {
        if (data && data.code === 0) {
          let CN = data.data.conditionsCN
          for (let i = 0; i < CN.length; i++) {
            this.now_conditions.push(CN[i])
            this.$set(this.dataForm, CN[i], '')
          }
        }
      }).then(() => {
        this.$http({
          url: this.$http.adornUrl('/get/hms_Chi_Eng/all/conditions'),
          method: 'get'
        }).then(({data}) => {
          if (data && data.code === 0) {
            let CN = data.data.conditionsCN
            for (let i = 0; i < CN.length; i++) {
              if (this.now_conditions.indexOf(CN[i]) === -1) {
                this.other_conditions.push(CN[i])
                this.$set(this.dataForm, CN[i], '')
              }
            }
          }
        })
      })
    },
    // 导出
    outPutShow (val, condition) {
      const workbook = XLSX.utils.book_new()
      if (val === true) {
        let sheet, cell
        for (let item in this.table_data) {
          cell = []
          if (this.table_data[item].tableCell[0] !== undefined) {
            for (let i in this.table_data[item].tableCell) {
              let onec = {}
              for (let j in this.table_data[item].tableCell[0]) {
                if (condition !== undefined && condition.indexOf(j) !== -1) {
                  onec[j] = JSON.parse(JSON.stringify(this.table_data[item].tableCell[i][j]))
                } else if (condition === undefined) {
                  onec = JSON.parse(JSON.stringify(this.table_data[item].tableCell[i]))
                  break
                }
              }
              cell.push(onec)
            }
          }
          if (cell.length !== 0) {
            XLSX.utils.book_append_sheet(workbook, XLSX.utils.json_to_sheet(cell), this.table_data[item].tableName)
          }
        }
        XLSX.writeFile(workbook, '导出文件.xlsx')
      } else {
        for (let item in this.table_data) {
          if (this.table_data[item].tableCell[0] !== undefined) {
            for (let i in this.table_data[item].tableCell[0]) {
              if (this.allConditions.indexOf(i) === -1) {
                this.allConditions.push(i)
              }
            }
          }
        }
        this.$refs.outPut.init(this.allConditions)
      }
    },
    // 全选
    // 多选
    // selectionChangeHandle (tableName, val) {
    //   this.dataListLoading = true
    //   let item
    //   for (item in this.table_data) {
    //     if (this.table_data[item].tableName === tableName) {
    //       this.dataListSelections[item] = val
    //       this.dataListLoading = false
    //     }
    //   }
    // },
    s2ab(val) {
      let buf = new ArrayBuffer(val.length)
      let view = new Uint8Array(buf)
      for (let i=0; i != val.length; ++i) view[i] = val.charCodeAt(i) & 0xFF
      return buf
    },
    // 每页数
    sizeChangeHandle (tableName, val) {
    },
    // 当前页
    currentChangeHandle (tableName, val) {
      let keys = '',vals = ''
      let key = this.keys.split(',')
      let vall = this.vals.split(',')
      for (let item in this.table_data) {
        if (this.table_data[item].tableName === tableName) {
          for (let i in this.table_data[item].tableCell[0]) {
            if (key.indexOf(i) !== -1) {
              keys = keys === ''? i:keys + ',' + i
              vals = vals === ''? vall[key.indexOf(i)]:vals + ',' + vall[key.indexOf(i)]
            }
          }
          if (keys === '') {
            this.$http({
              url: '/get/table/data',
              method: 'get',
              params: {
                currPage: val,
                tableName: tableName,
              }
            }).then(({data}) => {
              if (data && data.code === 0) {
                this.table_data[item].tableCell = data.data.tableCell
                this.table_data[item].currPage = val
                this.table_data[item].totalCount = data.data.totalCount
                this.table_data[item].pageSize = data.data.pageSize
                this.table_data[item].totalPage = data.data.totalPage
              }
            })
          } else {
            this.$http({
              url: '/get/table/data',
              method: 'get',
              params: {
                currPage: val,
                tableName: tableName,
                fields: keys,
                vals: vals
              }
            }).then(({data}) => {
              if (data && data.code === 0) {
                this.table_data[item].tableCell = data.data.tableCell
                this.table_data[item].currPage = val
                this.table_data[item].totalCount = data.data.totalCount
                this.table_data[item].pageSize = data.data.pageSize
                this.table_data[item].totalPage = data.data.totalPage
              }
            })
          }
        }
      }
    },
    // 获取页数对应的那个table内容
    currentTableShow (tableName, currentPage, pageSize) {
      for (let item in this.table_data) {
        if (this.table_data[item].tableName === tableName) {
          let list = []
          list = this.table_data[item].tableCell.slice((currentPage - 1) * pageSize, currentPage * pageSize)
          this.table_data[item].showList = list
        }
      }
    },
    // 点击显示查询结果
    submitSearchResult () {
      this.keys = ''
      this.vals = ''
      for (let item in this.dataForm) {
        if (item !== undefined && this.dataForm[item] !== '') {
          this.keys = this.keys === ''? item: this.keys + ',' + item
          this.vals = this.vals === ''? this.dataForm[item]: this.vals + ',' + this.dataForm[item]
        }
      }
      this.dataListLoading = true
      this.$http({
        url: this.$http.adornUrl('/get/condition/tables'),
        method: 'get',
        params: {
          keys: this.keys.toString(),
          vals: this.vals
        }
      }).then(({data}) => {
        if (data && data.code === 0) {
          this.table_data = data.data
          this.select = true
          this.dataListLoading = false
        } else if (data && data.code === 500) {
          this.$message(data.msg)
        }
      })
    },
    // 点击显示自定义查询条件界面
    customConditionHandler () {
      this.customCondition = true
      this.$nextTick(() => {
        this.$refs.more_search.init(this.now_conditions, this.other_conditions)
      })
    },
    // 更新条件
    refreshCondition (now, other) {
      this.now_conditions = now
      this.other_conditions = other
    }
  }
}
</script>

<style>
.el-col-lg-offset-0{
  margin-top: 19.5px;
  margin-left:0.5%;
  font-style: normal;
  width: 24%;
  color: #6f7180;
}
.button_style {
  margin-top: 4%;
  width: 25%;
  margin-left: 18%;
  margin-bottom: 4%;
}
.input_style_ {
  width: 40%;
  float: left;
  margin: -18px -6px 18px 5%;
}
.input_style {
  margin-top: 19.5px;
  width: 70%;
}
</style>
